import React, { Component } from 'react';
import Login from '../login/Login';

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false
    }
  }
  showLogin() {
    this.setState({
      show: true
    })
  }
  hideLogin() {
    this.setState({
      show: false
    })
  }
  render() {
    return (
      <div>
        <Login show={this.state.show} close={this.hideLogin.bind(this)}></Login>
        <div className="section-banner mt-5">
          <img className="img-fluid" src="https://img.taomei888.cn/image/jklyphao_74td6qfa7ubm5b6bab42e5414.jpeg" alt="藕片商家"/>
          <img className="join-btn" onClick={this.showLogin.bind(this)} src="https://img.taomei888.cn/image/jm1od8ps_17t4y0hcwr6k5b9b619c27205.png" alt=""/>
        </div>
        <div className="section container text-center">
          <div className="section-header pt-5 pb-4 color-theme">
            <div className="title-cn">藕片是什么？</div>
            <div className="title-en">WHAT IS THE</div>
          </div>
          <div className="section-content">
            <strong className="h3">“藕片”是由互助营销领导者，专为线下实体商家实现：</strong>
            <ul className="row mt-5">
              <li className="col-md-3">
                <img src="http://www.51oupian.com/static/img/what-one.c281b1d.jpg" alt=""/>
                <div className="mt-3 h4 color-pink">1.海量增加精准新客</div>
              </li>
              <li className="col-md-3">
                <img src="http://www.51oupian.com/static/img/what-two.b1857d4.jpg" alt=""/>
                <div className="mt-3 h4 color-pink">2.靶向引导再次消费</div>
              </li>
              <li className="col-md-3">
                <img src="http://www.51oupian.com/static/img/what-three.ed38f02.jpg" alt=""/>
                <div className="mt-3 h4 color-pink">3.锁定客户永不流失</div>
              </li>
              <li className="col-md-3">
                <img src="http://www.51oupian.com/static/img/what-four.4eb9dfa.jpg" alt=""/>
                <div className="mt-3 h4 color-pink">4.共享社区精准粉丝</div>
              </li>
            </ul>
            <div className="mt-5 h4">
              简而言之：<strong>拓、</strong><strong>留、</strong><strong>锁、</strong><strong>互助</strong>，从而达到业绩翻倍的互联网社区商圈平台。<br/>
              商家从此告别单打独斗，抱团取暖实现共享粉丝互利共赢。
            </div>
          </div>
        </div>
        <div className="section text-center section-app">
          <div className="section-header container pt-5 pb-4 color-theme">
            <div className="title-cn">藕片APP</div>
            <div className="title-en">OUPIAN APPS</div>
          </div>
          <div className="section-content container mt-4 pb-5">
            <div className="row justify-content-center">
              <div className="col-md-10 h4" style={{ lineHeight: 1.5 }}>
                一个帮你拓客，留客，锁客，升单的互助共享拓客平台。互联网+时代，实体店经营必备的拓客系统。超级异业联盟，资源共享；精准的社区粉丝经济；帮你打造手机版的“万达商城”，打造闭环经济商圈。
              </div>
            </div>
            <div className="row mt-3" style={{ lineHeight: 1.5, color: '#969696' }}>
              <div className="col-md-4">
                <div className="d-flex justify-content-center align-items-center h4 color-pink" style={{ height: '80px' }}>玩藕片—你来引领拼单热潮</div>
                <div className="mt-3"><img src="http://www.51oupian.com/static/img/92575807502462593.259cf70.png" alt="" className="img-fluid w-100"/></div>
                <div className="mt-5" style={{ lineHeight: 2, fontSize: '18px' }}>你身边的实体店，看得见摸得着。拼的是真实，拼的是安心。同时多店联盟推广。聚实惠，让你拼的更爽。</div>
              </div>
              <div className="col-md-4">
                <div className="d-flex justify-content-center align-items-center h4 color-pink" style={{ height: '80px' }}>藕片商城—海量商品等你淘</div>
                <div className="mt-3"><img src="http://www.51oupian.com/static/img/825306439974814875.a41f3ec.png" alt="" className="img-fluid w-100"/></div>
                <div className="mt-5" style={{ lineHeight: 2, fontSize: '18px' }}>聚合了彩妆、家居、食物等百种商品，百花齐放各领风骚，为热爱聚焦！</div>
              </div>
              <div className="col-md-4">
                <div className="d-flex justify-content-center align-items-center h4 color-pink" style={{ height: '80px' }}>一元拼，限时抢—释放速度 秒拼新体验，1嗨到底</div>
                <div className="mt-3"><img src="http://www.51oupian.com/static/img/866588913022731199.416a0d7.png" alt="" className="img-fluid w-100"/></div>
                <div className="mt-5" style={{ lineHeight: 2, fontSize: '18px' }}>活动专区： 1元拼、限时抢购，每天多个秒拼团，多个时段限时抢购，精彩多多！天天拼不停！抢不停！</div>
              </div>
            </div>
          </div>
        </div>
        <div className="section container">
          <div className="section-header pt-5 pb-4 color-theme">
            <div className="title-cn">藕片7大优势</div>
            <div className="title-en">7 BIG ADVANTAGE</div>
          </div>
          <div className="section-content mt-4">
            <div className="h4 color-theme text-center">顺应互联网大时代趋势的营销模式</div>
            <div className="row mt-4">
              <div><img src="http://www.51oupian.com/static/img/advance.7a777c4.jpg" alt=""/></div>
              <ul className="col offset-1" style={{ fontSize: '22px', lineHeight: '40px' }}>
                <li className="mb-4">
                  <span style={{ color: '#fdaf2a' }}>【01】</span>本社区粉丝，老带新精准客户引流
                </li>
                <li className="mb-4">
                  <span style={{ color: '#fdaf2a' }}>【02】</span>告别长期打价格战，短期投入长期回报
                </li>
                <li className="mb-4">
                  <span style={{ color: '#fdaf2a' }}>【03】</span>个人商城，还能卖其他行业产品，赚取跨界收益
                </li>
                <li className="mb-4">
                  <span style={{ color: '#fdaf2a' }}>【04】</span>实体店异业联盟，抱团取暖，资源共享
                </li>
                <li className="mb-4">
                  <span style={{ color: '#fdaf2a' }}>【05】</span>线上宣传、线下活动整合
                </li>
                <li className="mb-4">
                  <span style={{ color: '#fdaf2a' }}>【06】</span>独立管理后台，用户看得见摸得着
                </li>
                <li className="mb-4">
                  <span style={{ color: '#fdaf2a' }}>【07】</span>附加“销售利器“最强大脑WORD记忆课程，让你稳稳留客
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="section container">
          <div className="section-header pt-5 pb-4 color-theme">
            <div className="title-cn">申请流程</div>
            <div className="title-en">ADMISSION PROCESS</div>
          </div>
          <div className="section-content mt-4 text-center">
            <img className="img-fluid" src="http://www.51oupian.com/static/img/process.62ce175.png" alt="藕片商家申请"/>
          </div>
        </div>
        <div className="section container">
          <div className="section-header pt-5 pb-4 color-theme">
            <div className="title-cn">为什么选择藕片</div>
            <div className="title-en">CHOICE OF REASONS</div>
          </div>
          <div className="section-content mt-4">
            <img className="img-fluid" src="https://img.taomei888.cn/image/jklype7k_6mqmlaylmq7y5b6bab3ed51eb.jpeg" alt="为什么选择藕片"/>
          </div>
        </div>
      </div>
    )
  }
}

export default Home;